<template>
    <div>
        <head-nav></head-nav>
        <div class="center4">
            <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
                <el-tab-pane label="全部评论" name="first">
                    <h3>全部评论</h3>
                    <div class="liebiao" v-for="(item,index) in evaluateList1.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="index">
                        <div class="first">
                            <div class="star">
                                <el-rate
                                        v-model="item.star"
                                        disabled
                                        show-score
                                        text-color="#ff9900">
                                </el-rate>
                            </div>
                            <div class="name">{{item.name}}</div>
                            <div class="date">{{item.date}}</div>
                        </div>
                        <div class="text">{{item.text}}</div>
                    </div>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[2,4,6,8,10]"
                            background
                            :page-size="pagesize"
                            layout="total,sizes,prev, pager, next,jumper"
                            :total="total">
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="好评" name="second">
                    <h3>好评</h3>
                    <div class="liebiao" v-for="(item,index) in evaluateList2.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="index">
                        <div class="first">
                            <div class="star">
                                <el-rate
                                        v-model="item.star"
                                        disabled
                                        show-score
                                        text-color="#ff9900">
                                </el-rate>
                            </div>
                            <div class="name">{{item.name}}</div>
                            <div class="date">{{item.date}}</div>
                        </div>
                        <div class="text">{{item.text}}</div>
                    </div>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[2,4,6,8,10]"
                            background
                            :page-size="pagesize"
                            layout="total,sizes,prev, pager, next,jumper"
                            :total="total">
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="中评" name="third">
                    <h3>中评</h3>
                    <div class="liebiao" v-for="(item,index) in evaluateList3.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="index">
                        <div class="first">
                            <div class="star">
                                <el-rate
                                        v-model="item.star"
                                        disabled
                                        show-score
                                        text-color="#ff9900">
                                </el-rate>
                            </div>
                            <div class="name">{{item.name}}</div>
                            <div class="date">{{item.date}}</div>
                        </div>
                        <div class="text">{{item.text}}</div>
                    </div>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[2,4,6,8,10]"
                            background
                            :page-size="pagesize"
                            layout="total,sizes,prev, pager, next,jumper"
                            :total="total">
                    </el-pagination>

                </el-tab-pane>
                <el-tab-pane label="差评" name="fourth">
                    <h3>差评</h3>
                    <div class="liebiao" v-for="(item,index) in evaluateList4.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="index">
                        <div class="first">
                            <div class="star">
                                <el-rate
                                        v-model="item.star"
                                        disabled
                                        show-score
                                        text-color="#ff9900">
                                </el-rate>
                            </div>
                            <div class="name">{{item.name}}</div>
                            <div class="date">{{item.date}}</div>
                        </div>
                        <div class="text">{{item.text}}</div>
                    </div>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[2,4,6,8,10]"
                            background
                            :page-size="pagesize"
                            layout="total,sizes,prev, pager, next,jumper"
                            :total="total">
                    </el-pagination>
                </el-tab-pane>
            </el-tabs>
        </div>
        <foot-nav></foot-nav>
    </div>
</template>

<script>
    import HeadNav from "@/components/HeadNav";
    import FootNav from "@/components/FootNav";
    export default {
        name: "CkplView",
        components: {FootNav, HeadNav},
        data(){
            return{
                evaluateList1:[
                    {star:5,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:4,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:3,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:2,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:1.3,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                ],
                evaluateList2:[
                    {star:5,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:5,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:5,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:5,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:5,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                ],
                evaluateList3:[
                    {star:3,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:3,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:3,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:3,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:3,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                ],
                evaluateList4:[
                    {star:1,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:1,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:1,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:1,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                    {star:1.3,name:'ababab',date:'2021-09-01',text:'程安排合理，真正做到了纯玩无购物，基本青岛所有的精华景点全都包含在内，导游宁宁热情服务每一个人，专业的讲解，让我们深刻的了解了青岛得发展，真的是良心卖家，实力推荐'},
                ],
                activeName: 'second',
                currentPage: 1,
                pagesize:2,
                total:null
            }
        },
        mounted(){
            let name = sessionStorage.getItem('currentTab')
            if(name){
                this.activeName = name
            }
            var arr1=Object.keys(this.evaluateList1)
            this.total=arr1.length
            var arr2=Object.keys(this.evaluateList2)
            this.total=arr2.length
            var arr3=Object.keys(this.evaluateList3)
            this.total=arr3.length
            var arr4=Object.keys(this.evaluateList4)
            this.total=arr4.length
        },
        beforeRouteLeave(to, from, next){
            sessionStorage.removeItem('currentTab')
            next()
        },
        methods: {
            handleClick(tab, event) {
                sessionStorage.setItem('currentTab', tab.name)
            },
            handleSizeChange(val){
                this.pagesize=val
            },
            handleCurrentChange(val){
                this.currentPage=val
            }
        },

    }
</script>

<style scoped>
    .center4{
        text-align: left;
        width: 1190px;
        min-height: 200px;
        margin: 0 auto 10px;
        //border: 1px solid red;
    }
    .first{
        display: flex;
        padding: 15px;
    }
    .star{
        margin-right: 15px;
    }
    .name{
        margin-right: 15px;
    }
    .date{
        color: #b1b1b1;
    }
    .liebiao{
        padding-bottom: 20px;
        border-bottom: 1px dashed lightgray;
    }
</style>